@use 'sass:map';
@use 'node_modules/@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;

$background: map.get(gio.$mat-theme, background);
$foreground: map.get(gio.$mat-theme, foreground);
$typography: map.get(gio.$mat-theme, typography);

:host {
  display: block;

  @include mat.elevation(3); // default elevation
}

// remove card padding and default elevation when table is inside a card
:host-context(.mat-card > :last-child:not(.mat-card-footer)) {
  margin-left: -16px;
  margin-right: -16px;
  margin-bottom: -12px;
  @include mat.elevation(0);
}

.gio-table-wrapper {
  border-radius: 4px;

  &__header-bar {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    min-height: 56px;
    background: mat.get-color-from-palette($background, 'card');
    padding: 0px 16px 0px 16px;
    border-top: 1px solid mat.get-color-from-palette($foreground, divider);
    border-bottom: 1px solid mat.get-color-from-palette($foreground, divider);

    &__search-field {
      font-family: mat.font-family($typography, caption);
      font-size: mat.font-size($typography, caption);

      & > .mat-form-field-wrapper {
        padding-bottom: 0;
      }
    }
  }

  &__footer-bar {
    background-color: mat.get-color-from-palette($background, 'card');
    min-height: 12px;

    &__paginator {
      &.hidden {
        display: none;
      }
    }
  }
}

::ng-deep {
  // Force mat-table to full width only inside gio-table-wrapper
  gio-table-wrapper {
    .mat-table {
      width: 100%;

      .mat-header-row {
        height: 42px;
        background-color: mat.get-color-from-palette($background, 'background');
      }
    }

    // ⚠️ Material deep override
    // Remove form field padding provided to display mat-hint and mat-error. Not used here
    .gio-table-wrapper__header-bar__search-field {
      .mat-form-field-wrapper {
        padding-bottom: 0;
      }
    }
  }
}
